<template>
<div id="main">
	<div class="content page-order-checkout checkout">
		<div class="js-checkout-address-box">
			<div class="gray-box clear">
				<div class="title columns-title pre-title">
					<h2>收货信息</h2>
				</div>
				<div class="box-inner js-checkout-address-panel">
					<div class="address-common-table js-multiple-address-panel">
						<ul class="address-item-list clear js-address-item-list">
							<li class="js-choose-address" @click="chooseReceive(index)" :class="{'selected-address-item':receiveIndex==index}" v-for="item,index in receiveInfo">
								<div class="address-item">
									<div class="name-section">  {{item.name}}  </div>
									<div class="mobile-section">{{item.phone}}</div>
									<div class="detail-section"> {{item.province}} {{item.city}} {{item.county}} <br> {{item.add}} </div>
								</div>
								<div class="operation-section">
									<span class="update-btn js-edit-address">修改</span>
									<span class="delete-btn js-delete-address">删除</span>
								</div>
							</li>
							<li class="add-address-item js-add-address" @click="openPop">
								<p>使用新地址</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="gray-box">
			<div class="title">
				<h2>发票信息</h2>
			</div>
			<div class="box-inner invoice-box js-invoice-box"> 
				<p class="invoice-detail"> 发票类型：电子发票 </p> 
				<div class="invoice-detail"> 发票抬头： 
					<div class="radio-box"> 
						<label> 
							<input type="radio" class="hide"> 
							<span class="blue-radio" @click="checkedInvoice(true)" :class="{'blue-radio-on':incoice.prosonal}"><a></a></span>  个人
						</label> 
						<label> 
							<input type="radio" class="hide"> 
							<span class="blue-radio"  @click="checkedInvoice(false)" :class="{'blue-radio-on':!incoice.prosonal}"><a></a></span>  单位
						</label> 
					</div> 
					<div class="module-form-row form-item fn-hide js-invoice-title" v-if="!incoice.prosonal"> 
						<div class="module-form-item-wrapper no-icon small-item"> 
							<i v-show="!incoice.name">请填写公司发票抬头</i> 
							<input type="text" class="js-verify" v-model="incoice.name"> 
							<div v-show="!incoice.name" class="verify-error">必填</div>
						</div> 
					</div> 
				</div> 
				<p class="invoice-detail">发票内容：购买商品明细</p> <p class="invoice-label"> 电子发票是税务局认可的有效收付款凭证，可作为售后服务凭据。电子发票打印后可以用于企业报销。 </p>
			</div>
		</div>
		<div class="gray-box">
			<div class="title pre-title">
				<h2>购物清单</h2> 
			</div>
			<div class="box-inner ui-goods-cart">
				<div class="gray-sub-title cart-table-title"> 
					<span class="name">商品名称</span> 
					<span class="subtotal">小计</span> 
					<span class="num">数量</span> 
					<span class="price">单价</span> 
				</div>
				<div class="cart-table">
					<div class="cart-group js-cart-group">
						<div class="cart-items" v-for="item,index in checkGoods">
							<div class="items-thumb">  
								<a href="javascript:;" target="_blank">
									<img :src="item.ali_image+'?x-oss-process=image/resize,w_80/quality,Q_100/format,webp'">
								</a>  
							</div>
							<div class="name hide-row">
								<div class="name-cell"> 
									<a href="javascript:;" title="item.title+'('+item.spec_json.show_name+')'" target="_blank">{{item.title}}({{item.spec_json_name}})
									</a>
								</div>
							</div>
							<div class="subtotal">
								<div class="subtotal-cell">  ¥ {{item.price}}.00  </div> 
							</div>
							<div class="goods-num">{{item.count}}</div>
							<div class="price">¥ {{item.price*item.count}}.00</div>
						</div>
					</div>
				</div>				
			</div>
			<div class="box-inner"> 
				<div class="order-discount-line"> 
					<p> 商品总计： <span>¥{{checkedPrice}}.00</span> </p> 
					<p> 运费： <span>+ ¥ {{freight}}.00</span> </p>  
					<p class="discount-line js-discount-cash"> <em>现金券</em>： <span> - 0 </span> </p>  
				</div> 
			</div>
			<div class="box-inner"> 
				<div class="last-payment clear"> 
					<span class="jianguo-blue-main-btn big-main-btn payment-blue-bt fn-right js-checkout" @click="submitOrder"> <a>提交订单</a> </span>
					<span class="prices fn-right">应付金额： <em>¥ {{checkedPrice+freight}}.00</em></span> 
				</div> 
			</div>
		</div>
	</div>
	<addressPop v-if="showPop" @close="closePop"></addressPop>
</div>
</template>

<script>
import addressPop from '../components/address-pop.vue'
export default{
	data(){
        return{
            
        	// receiveInfo:[],  //地址 
        	receiveIndex:0,
        	showPop:false,  //新增地址弹画框
        	//发票  单位默认显示
        	incoice:{
                prosonal:true,
                name:''
        	}
        }
	},
	// create实例创建完成后立即调用 地址的数据
	created(){
        this.$store.state.receiveInfo.forEach((receive,index)=>{
            if(receive.default){
                this.receiveIndex=index
                return
            }
        })
	},
	computed:{
		//当前加入的商品
		checkGoods(){
			return this.$store.getters.checkGoods
		},
		// 商品总计
		checkedPrice(){
			return this.$store.getters.checkedPrice
		},
		//运费
		freight(){
			let freight=8
			if(this.checkedPrice>88){
                freight=0
			}
			return freight
		},
		//引入地址相关数据
		receiveInfo(){
			return this.$store.state.receiveInfo
		}
	},
	methods:{
		// 地址的选择
		chooseReceive(index){
			this.receiveIndex=index
		},
		//关闭填写地址框
		//父组件传给 子组件内容
		//关闭
		closePop(){
			this.showPop=false
			// 关闭的时候 信息重置一下
			this.$store.state.receiveInfo.forEach((receive,index)=>{
	            if(receive.default){
	                this.receiveIndex=index
	                return
	            }
	        })
		},
		//添加 打开
		openPop(){
			this.showPop=true
		},
		//选择个人
		checkedInvoice(boole){
            this.incoice.prosonal=boole
		},
		//提交订单
		submitOrder(){

			if(!this.incoice.prosonal && !this.incoice.name) return	
			// 创建新地址 
			let receiverInfo=this.receiveInfo[this.receiveIndex]
		    if(this.incoice.prosonal){
		    	this.incoice.name='个人'
		    }
		    let iData=new Date()
		    let month=iData.getMonth()+1
		    let day=iData.getDate()
		    if(month>=1 && month<=9){
		    	month='0'+month
		    }
		    if(day>=1&&day<=9){
                day='0'+day
		    }
		    let data={
		    	orderId:iData.getTime(),  //日期
		    	goodsData:this.checkGoods,   //购买商品的内容
		    	price:this.checkedPrice,   //  金额
		    	freight:this.freight,    //运费
		    	invoiceName:this.incoice.name,   // 发票信息
		    	iDate:iData.getFullYear()+'-'+month+'-'+day,  //订单时间
		    	receiverInfo:receiverInfo,  //地址
		    	isPay:false   //是否付款
		    }
		    //把上面的数据发送过去
		    this.$store.commit('submitOrder',data)
		    // 数据完成后进行跳转 Payment页面   传值   用orderId接收 data.orderId数据
		    this.$router.push({name:'Payment',query:{orderId:data.orderId}})
		}                      
	},
	components:{
		addressPop
	}
}	
</script>

<style>
@import url(../assets/css/checkout.css);
</style>